<script type="text/javascript" src="{{ asset('bundles/basehighcharts/highcharts.js') }}" ></script>
<script type="text/javascript" src="{{ asset('bundles/basehighcharts/themes/grid.js') }}" ></script>
<script type="text/javascript" src="{{ asset('bundles/basejqueryui/plugins/shuffle/jquery.shuffle.js') }}" ></script>
<script>
    var chart;
    var colors = {{colors|json_encode|raw}};
            
    function setChart(nameCategory, data) {            
        chart.xAxis[0].setCategories([nameCategory]);

        var cantSeries = $(chart.series).size();
        while(cantSeries > 0){
            for(index in chart.series){
                chart.series[index].remove(false);
            }
            cantSeries = $(chart.series).size();
        }
        
        //Make randoms positions for colors in array.
        colors = $.shuffle(colors);
        $.each(data, function(index, dataSerie){
            chart.addSeries({
                color : colors[index],
                name  : dataSerie.name,
                data  : dataSerie.data
            }, false);
        });
        chart.redraw();
    }

    $(document).ready(function() {          
        var dataSeries = {{dataSeries|json_encode|raw}};
        
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'containerHighchart',
                type: 'column'
            },
            title: null,
            subtitle: null,
            xAxis: {
                categories: ['Gastos']
            },
            yAxis: {
                title: {
                    text: null
                },
                labels: {
                    formatter: function() {
                        return '¢ ' + Highcharts.numberFormat(this.value, 0);
                    },
                    align: 'left',
                    x: 2,
                    y: 5,
                    style: {
                        fontSize: '8px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                },
                showFirstLabel: false
            },
            plotOptions: {
                series: {
                    borderColor: '#4e719b',
                    borderRadius: 1,
                    animation: {
                        duration: 1900,
                        easing: 'easeOutBounce'
                    }
                },
                column: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                var drilldown = this.drilldown;
                                if (drilldown) { // drill down
                                    setChart(drilldown.name, drilldown.data );
                                } else { // restore
                                    setChart('Categorias', dataSeries );
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        rotation: -60,
                        color: '#000',
                        align: 'center',
                        y: -15,
                        x: 3,
                        formatter: function() {
                            return  '¢ ' + this.y;
                        },
                        style: {
                            fontSize: '8px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = this.x +':<b>¢ '+ this.y +' ' + this.series.name + '</b><br/>';
                    if (point.drilldown) {
                        s += 'Click para ver '+ point.category +' gastos';
                    } else {
                        s += 'Click para volver a las categorias';
                    }
                    return s;
                }
            },
            series: dataSeries ,
            exporting: {
                enabled: false
            }
        });
    });
</script>